<template>
  <div>
    <div class="form-header">拘留所被拘留人情况统计月报表</div>
    <div class="form-des">
      <div class="des"><span>表号</span><span class="dot">:</span><span>公业33表</span></div>
    </div>
    <div class="form-des">
      <span class="time">2018年12月</span>
      <div class="des"><span>文号</span><span class="dot">:</span><span>公通字[2014]49号</span></div>
    </div>
    <div class="form-des">
      <div class="des"><span>制表机关</span><span class="dot">:</span><span>公安部</span></div>
    </div>
    <div class="form-des between"><span class="submit-unit">填报单位</span>
      <div class="des"><span>备案机关</span><span class="dot">:</span><span>国家统计局</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'form-title'
};
</script>

<style lang="scss">

.form-header {
  color: windowtext;
  font-size: 18pt;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  text-align: center;
}

.form-des {
  text-align: right;
  font-size: 9.0pt;
  display: flex;
  justify-content: flex-end;

  &.between {
    justify-content: space-between;
  }

  .des {
    width: 30%;
    margin-right: 20px;
  }

  span {
    height: 20px;
    width: 80px;
    display: inline-block;
    text-align: justify;
    margin-left: 5px;
    vertical-align: middle;

    &.submit-unit {
      text-align: left;
    }

    &.dot {
      width: 5px;
    }
  }

  .time {
    width: 20%;
    text-align: left;
    margin-left: 20px;
  }

  span:last-child {
    width: 100px;
  }

  span:after {
    content: '.';
    width: 100%;
    display: inline-block;
    overflow: hidden;
    height: 0;
    vertical-align: middle;
  }
}
</style>
